﻿<View:LayoutAwarePage
    x:Name="pageRoot"
    x:Class="ExampleApp.Views.MessageBoxAndFilePickerView"
    IsTabStop="false"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:ExampleApp.Views"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:View="using:StyleMVVM.View"
    View:ViewModel.Name="MessageBoxAndFilePickerViewModel"
    mc:Ignorable="d">

 <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}">
        <Grid.RowDefinitions>
            <RowDefinition Height="140"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition/>
            <ColumnDefinition/>
        </Grid.ColumnDefinitions>

        <!-- Back button and page title -->
        <Grid Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto"/>
                <ColumnDefinition Width="*"/>
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Click="GoBack" IsEnabled="{Binding Navigation.CanGoBack}" Style="{StaticResource BackButtonStyle}"/>
            <TextBlock x:Name="pageTitle" Grid.Column="1" Text="MessageBox and FilePicker" Style="{StaticResource PageHeaderTextStyle}"/>
        </Grid>
        <TextBlock Grid.Row="1" Margin="20,5" FontSize="14" TextWrapping="Wrap">
            StyleMVVM provides an IMessageBoxService and a IFilePicker as fascades around the MessageBox and File picker classes.
            Below are examples of how to open a message box and pick a file. One of the benefits of using these services is that during unit test time
            the Faux Version of the services are loaded and you can control the responses or Mock your own.
        </TextBlock>
        
        <Grid Grid.Row="2" Grid.ColumnSpan="2">
            <TextBlock HorizontalAlignment="Left" Margin="42,36,0,0" TextWrapping="Wrap"
                     FontSize="14"  Text="Message Box Text" VerticalAlignment="Top"/>
            <TextBox HorizontalAlignment="Left" Margin="42,67,0,0" TextWrapping="Wrap" Text="{Binding MessageText, Mode=TwoWay}" VerticalAlignment="Top" Width="200"/>
            <Button Content="Open Message box" View:EventHandlers.Attach="Click => OpenMessageBox()" HorizontalAlignment="Left" Margin="269,67,0,0" VerticalAlignment="Top" Width="180"/>
            <TextBlock HorizontalAlignment="Left" Margin="42,152,0,0" TextWrapping="Wrap" Text="Selected File Name" FontSize="14" VerticalAlignment="Top"/>
            <TextBlock HorizontalAlignment="Left" Margin="42,186,0,0" TextWrapping="Wrap" Text="{Binding FileName}" FontSize="14" VerticalAlignment="Top"/>
            <Button Content="Open File Picker" View:EventHandlers.Attach="Click => OpenFilePicker()" 
                    HorizontalAlignment="Left" Margin="269,186,0,0" VerticalAlignment="Top" Width="180"/>

        </Grid>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape"/>
                <VisualState x:Name="Filled"/>

                <!-- The entire page respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource PortraitBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedBackButtonStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle" Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0" Value="{StaticResource SnappedPageHeaderTextStyle}"/>
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</View:LayoutAwarePage>
